<template>
    <div class="app-container">
      <el-row :gutter="24">
        <el-col :span="3">
          <div>
            <span class="title">  树形菜单</span>
            <i class="el-icon-edit" />
            <i class="el-icon-share" />
            <i class="el-icon-delete" />
          </div>
  
          <el-tree :data="treeData" @node-click="handleNodeClick"/>
  
        </el-col>
  
        <el-col :span="21" class="bg">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              
              <el-row>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <=====----------=====>

                <el-form-item>
                  <el-button type="primary" @click="onQuery" size="small">查询</el-button>
                </el-form-item>
              </el-form>
              </el-row>
              <el-row>
                <el-button type="primary" size="small" icon="el-icon-plus"  @click="showDialog(1)">新增</el-button>
                <el-button type="success" size="small" icon="el-icon-edit">修改</el-button>
                <el-button type="info" size="small" icon="el-icon-delete"  @click="itemBatch_DEL">删除</el-button>
                <el-button type="warning" size="small" icon="el-icon-bottom">导入</el-button>
                <el-button type="danger" size="small" icon="el-icon-top">导出</el-button>
              </el-row>
  
            </el-form>
          <el-table :data="list" style="width: 100%"  ref="multipleTable" tooltip-effect="dark" @selection-change="tableSelect">
          <!-- <el-table-column prop="是否展示" label="display" width="120">
          <template slot-scope="scope">
              <el-tag v-if="scope.row.display===1" type="success">是</el-tag>
              <el-tag v-if="scope.row.display===0" type="info">否</el-tag>
          </template>
          </el-table-column> -->
          <el-table-column type="selection" width="50"> </el-table-column>
          <!!!!!----------!!!!!>

          <el-table-column fixed="right" label="操作" width="170">
            <template slot-scope="scope">
                <el-button size="mini" @click="editItem(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="deleteItem(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
        </el-col>
  
        <el-dialog
          title="新增/编辑"
          :visible.sync="dialogVisible"
          :before-close="dialogClose"
          width="75%">
       
          <el-form ref="fromView" :inline="true" :model="fromView" :rules="formRules" status-icon class="demo-form-inline" label-width="100px" label-position="right">
              <el-row type="flex" justify="start">
                  <el-col :span="7">
                    <el-form-item label="用户账号" prop="userName">
                      <el-input v-model="fromView.userName" placeholder="用户账号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="用户昵称" prop="nickName">
                      <el-input v-model="fromView.nickName" placeholder="用户昵称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="邮箱" prop="email">
                      <el-input v-model="fromView.email" placeholder="邮箱"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--占位-->
                  <!-- <el-col :span="2"></el-col> -->
              </el-row>
  
              <el-row type="flex" justify="start">
                  <el-col :span="7">
                    <el-form-item label="手机号码" prop="phonenumber">
                      <el-input v-model="fromView.phonenumber" placeholder="手机号码"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="性别" prop="sex">
                      <el-select v-model="fromView.sex" placeholder="请选择性别">
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                      </el-select>
                      <!-- <el-input v-model="formInline.sex" placeholder="性别"></el-input> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="密码" prop="pasword">
                      <el-input v-model="fromView.pasword" placeholder="密码"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--占位-->
                  <!-- <el-col :span="5"></el-col> -->
              </el-row>
  
  
              <el-row type="flex" justify="start">
                  <el-col :span="7">
                    <el-form-item label="状态">
                      <template>
                      <div>
                        <el-radio-group v-model="fromView.status" size="small">
                          <el-radio-button label="0">正常</el-radio-button>
                          <el-radio-button label="1">禁用</el-radio-button>
                        </el-radio-group>
                      </div>
                    </template>
                    </el-form-item>
  
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="部门">
                      <template>
                        <div class="block">
                          <el-cascader
                            v-model="fromView.dept_id"
                            :options="deptTree"
                            :show-all-levels="false"
                            :props="{ label: 'deptName', value: 'deptId', emitPath: false }"
                             ></el-cascader>
                        </div>
                    </template>
                    </el-form-item>
  
                  </el-col>
                  <!--占位-->
                  <!-- <el-col :span="5"></el-col> -->
              </el-row>
  
  
              <el-row type="flex" justify="start">
                  <el-col :span="24">
                    <el-form-item label="备注">
                      <el-input
                        :rows="3"
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="fromView.remark"
                        maxlength="200"
                        show-word-limit
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <!--占位-->
                  <!-- <el-col :span="5"></el-col> -->
              </el-row>
              <div style="margin: 5px 0;"></div>
              <el-row type="flex" justify="start">
                <el-col :span="2"></el-col>
                <el-col :span="19">
                  <el-form-item>
                    <el-button type="primary" @click="onSubmitAdd('ruleForm')">{{buttonText.editSubmit}}</el-button>
                    <el-button @click="dialogClose('ruleForm')">取消</el-button>
                  </el-form-item>
                </el-col>
             </el-row>
          </el-form>
        </el-dialog>
  
  
      </el-row>
  
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
  
    </div>
  </template>
  
  <script>
  // 导入api/文件_____.js中的fetchData这个方法
  import mixin from './mixin'
  
  export default {
      name: '_____',
      mixins: [mixin],
      data() {
          return {
          }
      }
  }
  
  </script>
  
  <style>
  
  </style>